<template>
  <div class="order-container">
    <!-- 搜索区域 -->
    <el-card class="search-card">
      <el-form :inline="true" :model="searchForm" label-width="80px">
          
         
      <el-form-item label="时间" required>
                <el-col :span="16">
                    <el-form-item >
                        <el-date-picker  placeholder="选择日期"
                        value-format="yyyy-MM-dd" 
                        v-model="searchForm.mintime"
                            style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-form-item>

            <el-form-item label="最大时间" required>
                <el-col :span="16">
                    <el-form-item >
                        <el-date-picker  placeholder="选择日期"
                        value-format="yyyy-MM-dd" 
                        v-model="searchForm.maxtime"
                            style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-form-item>


           <el-form-item label="订单状态" label-width="5"> 
           <el-select   v-model="searchForm.zt" placeholder="请选择状态">
            
             <el-option  v-for="(item, index) in items" :key="index" :value="item.type" :label="item.label" ></el-option>
           
           </el-select>
           </el-form-item>

           <el-form-item label="顾客需求">
            <el-select v-model="searchForm.Ptype"      placeholder="请选择状态">
             <el-option  v-for="(item, index) in zts" :key="index" :value="item.type" :label="item.label" ></el-option>
   
          </el-select>
           </el-form-item>

        <el-button type="primary" @click="searchOrders">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form>
    </el-card>
    <!-- 订单列表 -->
    <el-card class="table-card">
      <el-table :data="order" border style="width: 100%">

        <el-table-column  label="订单编号" width="100" ><template #default="{row}">{{row.Pbh}}</template> </el-table-column>

        <el-table-column label="客户名称" width="120"><template #default="{row}">{{row.UserName}}</template> </el-table-column>
   <el-table-column label="支付方式" width="120"><template #default="{row}">{{row.Zhifu}}</template> </el-table-column>
          <el-table-column label="订单类型" width="120">
            <template  #default="{row}" >
                  <div v-if="row.Ptype===1">
               <el-tag  style="border-color: aqua;">外卖</el-tag>
            </div>
           
            <div v-if="row.Ptype===2">
             <el-tag  style="border-color: aqua;">自取</el-tag>
            </div>
            </template>
          </el-table-column>



        <el-table-column label="订单状态" width="150px">

          <template #default="{row}">
            <div v-if="row.zt===1">
               <el-tag  style="border-color: aqua;">  <i class="el-icon-alarm-clock"  style="color:yellow"></i>已下单</el-tag>
            </div>
           
            <div v-if="row.zt===2">
             <el-tag  style="border-color: aqua;">  <i class="el-icon-loading"  style="color:yellow"></i>配送中</el-tag>
            </div>

            <div v-if="row.zt===3">
              <el-tag  style="border-color: aqua;">  <i class="el-icon-truck"  style="color:yellow"></i>配送中</el-tag>
            </div>

            <div v-if="row.zt===4">
              <el-tag  style="border-color: aqua;">  <i class="el-icon-knife-fork"  style="color: red  "> </i>   制作完成</el-tag>
            </div>
              <div v-if="row.zt===5">
              <el-tag  style="border-color: red;">  <i class="el-icon-error"  style="color: red  "> </i>   订单已取消</el-tag>
            </div>
          </template>
         </el-table-column>

        <el-table-column prop="Pdata" label="创建时间">
<template #default="{row}">
      <label>{{row.Pdata.substr(0,10)+" "+row.Pdata.substr(11,8)}}</label>
</template>
        </el-table-column>



        <el-table-column label="操作" fixed="right">
          <template #default="{row}">
            <div v-if="row.zt ===1">
         
              <el-button size="mini" type="danger"   @click="cancelOrder(row,5)">取消</el-button>
            </div>
            <div v-if="row.zt==2">
              <el-button size="mini"  @click="cancelOrder(row,3)">制作完毕</el-button>
            </div>

               <div v-if="row.zt==3">
              <el-button size="mini"  @click="cancelOrder(row,4)">确认送达完成</el-button>
            </div>

               <div v-else>
              <el-button size="mini" disabled >无操作</el-button>
            </div>

           
          </template>
        </el-table-column>


      </el-table>

      <!-- 分页组件 -->
      <div class="pagination " style="text-align: center;"  >
        <!-- <el-pagination
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          @current-change="handlePageChange"
        >
        </el-pagination> -->

        <el-pagination  center="center" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
          :page-sizes="[3, 5, 8, 10]" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="count">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>

export default {
  data() {
    return {
      searchForm: {
         zt:6,
         Ptype:3,
         maxtime:"",
         mintime:""
      },
       items: [
         { type: 6, label: '全部' },
          { type: 1, label: '已下单' },
          { type: 2, label: '制作中' },
          { type:3, label: '运输中' },
          { type: 4, label: '已完成' },
          { type: 5, label: '订单取消' },
       
        ],
        zts: [
          { type: 1, label: '外卖' },
          { type: 2, label: '自取' },
          { type: 3, label: '全部' },
        ]
  ,
   order: [],
   
      page: 1,
      size: 5,
      count: 0
    }
  },
  created() {
    this.fetchOrders();
  },
  methods: {
    fetchOrders() {
      
      this.axios({
        method: 'get',
        url: 'Pder',
        params: {page: this.page, limit: this.size,ddzt:this.searchForm.zt,xdzt:this.searchForm.Ptype,Atime:this.searchForm.mintime,BTime:this.searchForm.maxtime}
      }).then(res => {
this.order=res.data;
 this.count=res.count;
     
        console.log('后端返回数据:', res.data);
         }).catch(error => {
         console.log(error);
      });
    },

    // 处理搜索
    searchOrders() {
      this.Page = 1
      this.fetchOrders()
    },

    // 重置搜索
    resetSearch() {
      this.searchForm.Ptype = ''
      this.searchForm.zt = ''
      this.Page = 1
      this.fetchOrders()
    },
    // 取消订单
    cancelOrder(order,state) {
      this.$confirm('确定要取消该订单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        
        // 调用取消订单API
        this.axios({
          method: "Put",
          url: "/Pder/AAA",
          data: {Pbh:order.Pbh,Zt:state}
        }).then(res => {
          this.$message.success('订单取消成功')
          this.fetchOrders()
        }).catch(error => {

        })

      }).catch(() => {
        this.$message.info('已取消操作')
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val;
      this.fetchOrders(); // 当每页数量改变时重新请求数据
    },
    handleCurrentChange(val) {
      this.page = val;
      console.log(`当前页: ${val}`);
     this.fetchOrders(); // 当页码改变时重新请求数据
    },

  }
}
</script>

<style scoped>
.order-container {
  padding: 20px;
}

.search-card {
  margin-bottom: 20px;
}

.table-card {
  margin-bottom: 30px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>